<template>
	<view class="jobItem" @click="toDetail">
		<view class="jobTop">
			<image class="emergency" v-if="item.emergency == 1" src="../../static/img/emergency.png"></image>
			<image class="stick" v-if="item.stick == 1" src="../../static/img/stick.png"></image>
			<view :class="item.stick || item.emergency ? 'jobName isPd' : 'jobName'">
				<view :class="item.clicked ? 'text1 ac overflow' : 'text1 overflow'">{{item.jobname}}</view>
			</view>
			<view class="salary">
				<view class="wage overflow">{{item.wage_text}}</view>
				<view class="refreshtime overflow">{{item.refreshtime}}</view>
			</view>
			<view class="jobTag">
				<view class="tag color1" v-if="item.experience_text">{{item.experience_text}}</view>
				<view class="tag color2" v-if="item.education_text">{{item.education_text}}</view>
				<view v-if="item.tag">
					<view :class="['tag', index == 0 ? 'color3' : '' ,index == 1 ? 'color1' : '' ]"
						v-for="(tag,index) in item.tag.slice(0,2)" :key="index">{{tag}}</view>
				</view>
			</view>
		</view>
		<view class="jobBottom">
			<view class="companyImg">
				<image class="img" :src="item.company_logo"></image>
			</view>
			<view class="companyInfo">
				<view class="companyHr">
					<view class="text1 overflow">{{item.job_contact}}</view>
					<view class="text2 overflow">{{item.companyname}} </view>
				</view>
				<view class="address overflow">{{ item.distance ? item.distance : item.district_text}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['item'],
		methods: {
			toDetail() {
				this.$emit('toDetail', this.item.id)
			},
		},
	}
</script>
<style lang="scss" scoped>
	.jobItem {
		background: #fff;
		border-radius: 14rpx;
		margin-bottom: 18rpx;

		// margin: 0 30rpx 18rpx;
		.jobTop {
			padding: 24rpx 28rpx 28rpx;
			position: relative;

			.stick,
			.emergency {
				width: 50rpx;
				height: 46rpx;
				position: absolute;
				left: -6rpx;
				top: 26rpx;
				// transform: translateY(-50%);
				display: block;
			}

			.jobName {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&.isPd {
					padding-left: 30rpx;
				}

				.text1 {
					color: #2a2a2a;
					font-size: 36rpx;
					font-weight: bold;

					&.ac {
						color: #797979;
					}
				}

			}

			.salary {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 0 14rpx;
				padding-left: 8rpx;

				.wage {
					color: #FC6502;
					font-size: 36rpx;
					font-weight: bold;
					flex-shrink: 0;
					width: calc(100% - 260rpx);
				}

				.refreshtime {
					flex-shrink: 0;
					text-align: right;
					color: #999999;
					font-size: 26rpx;
					width: 200rpx;
				}
			}

			.jobTag {
				display: flex;
				overflow: hidden;

				// .tag {
				// 	flex-shrink: 0;
				// 	background: #f1f5ff;
				// 	color: #797979;
				// 	font-size: 24rpx;
				// 	margin-right: 12rpx;
				// 	padding: 10rpx 18rpx;
				// 	border-radius: 4rpx;
				// }
				.tag {
					font-size: 28rpx;
					margin-right: 10rpx;
					border-radius: 6rpx;
					text-align: center;
					padding: 4rpx 18rpx;
					display: inline-block;
					color: #2263E9;
					font-size: 24rpx;
					background: #F3F6FD;

					&.color1 {
						color: #FF9D54;
						background: rgba(255, 157, 84, 0.08);
					}

					&.color2 {
						color: #AE79FF;
						background: rgba(174, 121, 255, 0.08);
					}

					&.color3 {
						color: #74CEA9;
						background: rgba(116, 206, 169, 0.08);
					}
				}
			}
		}

		.jobBottom {
			display: flex;
			border-top: 1rpx solid #f2f2f2;
			padding: 22rpx 28rpx 24rpx;
			align-items: center;

			.companyImg {
				width: 70rpx;
				height: 70rpx;
				margin-right: 16rpx;
				position: relative;
				border-radius: 50%;
				border: 1rpx solid #f2f2f2;
				flex-shrink: 0;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.companyInfo {
				flex-shrink: 0;
				width: calc(100% - 68rpx - 16rpx);
				display: flex;
				align-items: center;

				.companyHr {
					width: 370rpx;
					flex-shrink: 0;
					margin-right: 30rpx;

					.text1 {
						color: #2a2a2a;
						font-size: 26rpx;
						margin-bottom: 6rpx;
					}

					.text2 {
						color: #999999;
						font-size: 24rpx;
					}

					.pd {
						padding: 0 10rpx;
					}
				}

				.address {
					width: calc(100% - 400rpx);
					flex-shrink: 0;
					text-align: right;
					color: #999999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>